<template>
	<div class="headerNav container">
		<h1 class="logo">
			<a href="./"></a>
		</h1>
		<nav>
			<ul class="navLeft">
				<li class="navItem"><a href="" class="navLink">首页</a> </li>
				<li class="navItem"><a href="" class="navLink">详情</a> </li>
				<li class="navItem"><a href="" class="navLink">联系我们</a> </li>
			</ul>
			<ul class="navRight">
				<li class="navItem"><a href="" class="navLink btn btnLogin">Login</a> </li>
				<li class="navItem"><a href="" class="navLink btn btnRegister">Register</a> </li>
			</ul>
		</nav>
	</div>
</template>

<script>
	export default {
		name: 'HeaderNav',
		props: {
			msg: String
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.headerNav {
		height: 100%;
		padding: 0 15px 0 15px;
		margin: 0 auto;
		display: flex;
		align-items: center;

		.logo {
			width: 162px;
			height: 40px;
			margin-right: 20px;

			a {
				display: block;
				width: 100%;
				height: 100%;
				background-image: url(../assets/sprite.png);
				background-repeat: no-repeat;
				background-position: -325px -381px;
			}
		}

		nav {
			width: 928px;
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			ul {
				height: 100%;
				line-height: 40px;

				li {
					float: left;
					padding: 0 20px;
				}
			}

			ul.navRight {
				.navItem {
					.btnRegister {
						display: block;
						padding: 0 20px;
						cursor: pointer;
						font-size: 16px;
						color: #fff;
						background-color: #0c87f2;
						border-color: 1px solid transparent;
						border-radius: 4px;
					}
				}
			}
		}

	}
</style>
